<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<!DOCTYPE>
<html>
<head>
<title>服务器状态</title>
<script src="media/js/jquery-1.10.1.min.js" type="text/javascript"></script>
<link href="media/css/jquery.easy-pie-chart.css" rel="stylesheet"
	type="text/css" media="screen" />
<script src="media/js/jquery.easy-pie-chart.js" type="text/javascript"></script>
<script src="js/echarts.min.js" type="text/javascript"></script>
<script src="js/dateutils.js" type="text/javascript"></script>
<script src="js/svmonitor.js" type="text/javascript"></script>

</head>
<body>
	<div style="padding: 20px;">

		<div class="row-fluid">

			<div class="span3">
				<div class="portlet box green">
					<div class="portlet-title">
						<div class="caption">
							<i class="icon-cogs"></i>服务器监控列表
						</div>
					</div>
					<div class="portlet-body">
						<table class="table table-hover">
							<tbody>
								<c:forEach items="${list}" var="node">
									<tr id="${node.sname} ${node.ip}" onclick="clicktable(this)">
										<th>${node.sname}</th>
										<th>${node.ip}</th>
									</tr>
								</c:forEach>
							</tbody>
						</table>
					</div>
				</div>
			</div>

			<div class="span9">
				<div class="row-fluid">
					<div class="portlet box blue">
						<div class="portlet-title">
							<div class="caption">
								<i class="icon-calendar"></i>磁盘使用情况
							</div>
						</div>
						<div class="portlet-body">
							<div class="row-fluid" id="diskrow">

								<!-- piecharts -->
								<c:forEach items="${disklist}" var="dnode">
									<div class="span3">
										<div class="easy-pie-chart">
											<div class="number disk" data-percent=${dnode.used} >
												<span>${dnode.used}</span>
											</div>
											<a class="title" href="#">${dnode.diskname}</a>
										</div>
									</div>
								</c:forEach>

							</div>
						</div>
					</div>
				</div>

				<div class="row-fluid">
					<div class="span5">
						<div class="portlet box blue" style="height: 100%;">
							<div class="portlet-title">
								<div class="caption">
									<i class="icon-calendar"></i>内存利用率
								</div>
							</div>
							<div class="portlet-body">
								<div style="text-align: center;">
									<div id="mem_pie" class="piechart" style="margin: 0 auto;"
										data-percent="${mem.usedmem*100/mem.totalmem}">
										<span class="percent" id="cmemtip"><fmt:formatNumber
												type="number" value="${mem.usedmem*100/mem.totalmem}"
												maxFractionDigits="2" />%</span>
									</div>

									<div id="memtip">使用内存/内存总量:&nbsp;&nbsp;${mem.usedmem}/${mem.totalmem}MB</div>
								</div>
							</div>
						</div>
					</div>

					<div class="span7">
						<div class="portlet box blue">
							<div class="portlet-title">
								<div class="caption">
									<i class="icon-calendar"></i>CPU负载
								</div>
							</div>
							<div class="portlet-body">
								<div id="cpucharts" style="width: 100%; height: 300px;"></div>
							</div>
						</div>
					</div>
				</div>

				<div id="hbdiv" class="row-fluid" style="display: none;">
						<div class="portlet box blue" type="hidden">
							<div class="portlet-title">
								<div class="caption">
									<i class="icon-calendar"></i>心跳监测
								</div>
							</div>
							<div class="portlet-body">
								<div id="hbcharts" style="width:800px; height: 310px;"></div>
							</div>
						</div>
				</div>

			</div>

		</div>
	</div>

	<input id="quotaValue" type="hidden" value=${quotaMap} >

	<script src="js/svmonitor.js" type="text/javascript"></script>
	<script>
		$('.easy-pie-chart .number.disk').easyPieChart({
			animate : 1000,
			size : 75,
			lineWidth : 3,
			barColor : '#ffb848'
		});

		var mem_chart;
		$('#mem_pie').easyPieChart({
			animate : 1000,
			size : 175,
			easing : 'easeOutBounce',
			lineWidth : 6,
			barColor : '#70AFC4'
		});
		mem_chart = window.chart = $('#mem_pie').data('easyPieChart');
	</script>


</body>
</html>